<template>
  <div class='header'>
    <div class="container">
      <div>
        <el-icon>
          <router-link to="/userinfo">
            <Back/>
          </router-link>
        </el-icon>
      </div>
      <span>历史行程</span>
    </div>
  </div>

  <ul>
    <li v-for="trip in trips" :key="trip.id">
      <el-card class="tripCard" style="line-height: 2;">
        <router-link to="/historyinformation">
          <p>行程路线：{{ trip.route }}</p>
          <p>出发时间：{{ trip.departureTime }} &nbsp;&nbsp; </p>
          <p style=" width: 80%;display: flex; justify-content: space-between;">
            <span>{{ trip.num }}人/{{ trip.seats }}座</span>
            <span>{{ trip.price }}元/位</span>
          </p>
          <hr class="line-only">
          <p style=" width: 85%;display: flex; justify-content: space-between;">
            <span>状态：<span :style="{ color: statusColor }">{{ trip.status }}</span></span>
            <button>删除行程记录</button>
          </p>
        </router-link>
      </el-card>
    </li>
  </ul>
</template>
<script setup>
import {ref, computed} from 'vue'

const trips = ref([
  {
    id: 1,
    route: '阿克苏------阿拉尔',
    departureTime: '2023-05-01 08:00:00',
    num: 4,
    seats: 10,
    price: 50,
    status: '已完成',
  },
  {
    id: 2,
    route: '阿克苏------阿拉尔',
    departureTime: '2023-09-30 08:02:00',
    num: 0,
    seats: 7,
    price: 50,
    status: '已完成',
  }
])

const statusColor = computed(() => {
  if (trips.status === '行程中') {
    return 'green';
  } else if (trips.status === '等待乘客') {
    return 'yellow';
  } else {
    return 'red';
  }
});


</script>

<style lang='less' scoped>
.header {
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;
  padding: 0 12px;

}

.container {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.tripCard {
  margin: 20px 10px 20px 10px;
}

.line-only {
  width: 40%;
  border: none; /* 去除默认的边框 */
  border-top: 1px solid black; /* 添加一条横线 */
  margin-top: 15px; /* 增加横线与上方元素之间的距离 */
  margin-bottom: 15px; /* 增加横线与下方元素之间的距离 */
}
</style>
  

